<template>
	<view class="load" v-if="!load">
		<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
	</view>
	<view class="wrap" v-else>
		
		<view class="head1">
			<view class="searchBox">
				<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721975652195245.png" mode="" @click="searchCustomers">
				</image>
				<input type="text" v-model="searVal" @input="searchInputHandle" placeholder="请输入收件人的名称/电话"/>
				<!-- <button style="width: 50rpx; height: 30rpx; background-color: #000;"></button> -->
			</view>
		</view>
		<view style="height: 108rpx;"></view>
		<view class="box" v-if="recordList.length">
			<view class="send_head">
				<div class="send_tit_name" @click="nav_to('/pages/gift/gift')">礼品库</div>
				<div class="send_tit_name" @click="nav_to('/pages/custom/myCustom')">我的客户</div>
			</view>
			<view class="send_body" v-for="(record) in recordList" :key="record.ID">
				<view class="send_tit" v-if="record.Title">
					<view class="tit_name">
						<view class="mark"></view>
						<view class="tit">
							{{record.Title}}
						</view>
					</view>
					<view class="tit_lit" v-if="record.Qty">
						每人{{record.Qty}}件
					</view>
				</view>
				<block v-if="record.OrderList && record.OrderList.length">
					<view class="send_cell" v-for="(order) in record.OrderList" :key="order.ID" @click="nav_to(`/pages/order/orderDetail?id=${order.ID}`)">
					
						<view class="send_info">
							<view class="info_head">
								<view class="head">
									<image
										:src="order.HeadImgUrl || 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1722996894207462.png'"
										mode="aspectFill"></image>
								</view>
								<view class="info_body">
									<view class="info_tit">
										<view class="tit">
											{{ order.Delivery_Accepter || '--' }}
										</view>
										<view class="status">
											{{getStatus(order.Status)}}
										</view>
									</view>
									<view class="info_count">
										<text v-if="order.Delivery_Province">{{order.Delivery_Province}}</text>
										<text v-if="order.Delivery_City">{{order.Delivery_City}}</text>
										<text v-if="order.Delivery_Address">{{order.Delivery_Address}}</text>
									</view>
								</view>								
							</view>
							<!-- <view class="info_address">
								<text v-if="order.Delivery_Province">{{order.Delivery_Province}}</text>
								<text v-if="order.Delivery_City">{{order.Delivery_City}}</text>
								<text v-if="order.Delivery_Address">{{order.Delivery_Address}}</text>
							</view> -->
						</view>
						<view class="send_foot">
							<view class="time">
								领取时间：{{ $util.formatDateTime(order.OrderTime) }}
							</view>
							<!-- <view class="close_btn" @click="cancelGive(order.ID,rIndex,oIndex)" v-if="order.Status!=3">
								取消赠送
							</view> -->
							<view class="close_btn_cell"  v-if="order.Status==0" @click="payFun(order)">
								<view class="close_btn">
									立即付款
								</view>
							</view>
						</view>
					</view>
				</block>
				
			</view>
		</view>
		<block v-else>
			<EmptyBox text="这里什么都没有..."></EmptyBox>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				load: false,
				recordList: {},
				searVal:''
			};
		},
		computed: {
			minusImage() {
				return this.countQty > 1 ?
					'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/172162992121443.png' :
					'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/172162990142299.png';
			},
			plusImage() {
				return this.countQty < this.stock ?
					'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721629860962316.png' :
					'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721629877490898.png';
			},
			
		},
		watch: {

		},

		onReady() {

		},

		async onLoad(e) {
			this.ProductID = e.productID
			this.fetchData(this.ProductID)
		},

		async onShow() {},

		onUnload() {

		},
		methods: {
			searchInputHandle(e){
				this.$util.debounce(()=>{
					this.searVal = e.detail.value.replace(/\s+/g, "")
					if(!this.searVal){
						this.fetchData(this.ProductID)
					}else{
						this.Search()
					}
				},300)
			},
			async Search(){
				let res = await this.$api.post('/Order/Search',{
					ValueStr:this.searVal
				})
				if(res.code==0){
					this.recordList = res.data
					this.recordList = this.recordList.filter(item=>item.OrderList.length)
				}else if(res.code==100){
					this.recordList = []
				}else{
					this.$pv.msg(res.message)
				}
			},
			async payFun(item){
				console.log(item);
				let _this = this
				if(item.Status!=0) return
				// 支付订单接口
				let response = await this.$api.post('/Payment/PayV2', {
					EventType: '商品购买',
					EventID: item.ID,
					SourcePage: 'pages/gift/mySend',
					PayChannel: 'weixin',
				});

				if (response.code == 0) {
					let payObj = JSON.parse(response.data);
					// console.log(payObj, '==================PayV2----res.data')

					uni.requestPayment({
						provider: 'wxpay',
						// #ifdef MP-WEIXIN
						timeStamp: payObj.timeStamp,
						nonceStr: payObj.nonceStr,
						package: payObj.package,
						signType: payObj.signType,
						paySign: payObj.paySign,
						// #endif
						success: async function (res) {
							_this.$pv.msg('支付成功');
							_this.fetchData(this.ProductID)
						},
						fail: function (err) {
							_this.$pv.msg('您已取消支付');
						},
					});
				}
			},
			getStatus(s){
				return s==-2 ? '已退款' : s==-1 ? '已取消' : s==0 ? '待付款' : s==1 ? '待发货' : s==2 ? '待填地址' : s==3 ? '待签收' : s==4 ? '已完成' : ''
			},
			// 处理时间格式
			formatExpiredDate(dateString) {
				const date = new Date(dateString);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},

			async fetchData(productId) {
				const res = await this.$api.post('/SendGift/MySendGift');
				if (res.code == 0) {
					if(res.data && Array.isArray(res.data)){
						this.recordList = res.data
						this.recordList = this.recordList.filter(item=>item.OrderList.length)
					}
					// this.recordList.forEach(item => {
					// 	item.createTime = item.ExpiredDate.split('T')[0];
					// });
				}
				this.load = true
			},

			// 取消赠送
			async cancelGive(ID,rIndex,oIndex) {
				const res = await this.$api.post('/SendGift/CancelOrder', {
					OrderID: ID
				});
				if (res.code == 0) {
					
					this.$set(this.recordList[rIndex].OrderList, oIndex, null);
					
					this.recordList[rIndex].OrderList = this.recordList[rIndex].OrderList.filter(Boolean);
				
					// OrderList变为空，从recordList中移除整个记录
					if (!this.recordList[rIndex].OrderList.length) {
						this.$set(this.recordList, rIndex, null);
						this.recordList = this.recordList.filter(Boolean);
					}
				}
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.hide {
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*禁止换行*/
		text-overflow: ellipsis;
		/*省略号*/
	}

	.wrap {
		.box{
			padding: 24rpx;
			.send_head{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 24rpx;
				padding-bottom: 30rpx;
				.send_tit_name{
					font-size: 26rpx;
					color: #908e8e;
					text-decoration: underline;
				}
			}
		}
		.head1 {
			width: 100%;
			height: 98rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			top: 0;
			left: 0;
			box-shadow: 0 0 8rpx #ccc;
			.searchBox {
				width: 93%;
				height: 72rpx;
				background: #F6F6F6;
				border-radius: 36rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				font-size: 28rpx;
				color: #666666;

				image {
					width: 32rpx;
					height: 32rpx;
					margin: 0 10rpx 0 20rpx;
				}
				
				input {
					width: 80%;
				}
			}
		}
		.send_body {
			.send_tit{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 32rpx;
				.tit_name{
					display: flex;
					align-items: center;
					.mark{
						width: 6rpx;
						height: 30rpx;
						background: #FF6430;
						margin-right: 8rpx;
					}
					.tit{
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
					}
				}
				.tit_lit{
					font-size: 28rpx;
					color: #999999;
				}
			}
			padding: 24rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
			.send_cell {
				padding: 24rpx;
				background: #FFFFFF;
				border-radius: 16rpx; 
				box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0,0,0,0.08);
				margin-bottom: 24rpx;
				.send_info {
					
					.info_head{
						display: flex;
						align-items: center;
						.head {
							width: 96rpx;
							height: 96rpx;
							border-radius: 50%;
							overflow: hidden;
							margin-right: 24rpx;
						}
						.info_body {
							flex: 1;
						
							.info_tit {
								margin-bottom: 8rpx;
								display: flex;
								justify-content: space-between;
						
								.tit {
									font-weight: bold;
									font-size: 32rpx;
									color: #333333;
								}
						
								.status {
									font-size: 28rpx;
									color: #FF6030;
								}
							}
						
							.info_count {
								font-size: 28rpx;
								color: #909090;
								text{
									font-size: 24rpx;
									    color: #999999;
								}
							}
						}
					}
					.info_address{
						text{
							font-size: 24rpx;
							    color: #999999;
						}
					}
					

					
				}

				.send_foot {
					margin-top: 18rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.time {
						font-size: 24rpx;
						color: #999999;
					}
					.close_btn_cell{
						display: flex;
						align-items: center;
						.close_btn {
							padding: 14rpx 32rpx;
							font-size: 24rpx;
							color: #333333;
							border-radius: 32rpx;
							border: 2rpx solid #CCCCCC;
							margin-right: -8rpx;
						}
					}
					
				}
			}
			.send_cell:last-child{
				margin-bottom: 0;
			}
		}
		.send_body:last-child{
			margin-bottom: 0;
		}
	}
</style>